<template>
  <view>
    <!-- 假设我需要状态栏到文字内容部分还有50px的距离 -->
    <view
      class="status_bar"
      :style="{ height: height + 'px', background: bgcolor }">
      <view v-if="showBack" class="back" @tap="goback">
        <uni-icons :type="iconType" :color="color" size="36rpx" />
      </view>
      <text :style="{ color: color }">{{ title }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from "@dcloudio/uni-app";
let iconType: any = ref("left");
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  color: {
    type: String,
    default: "#000",
  },
  bgcolor: {
    type: String,
    default: "#75C8B4",
  },
  showBack: {
    type: Boolean,
    default: false,
  },
  path: {
    type: String,
    default: "",
  },
});
const pages = getCurrentPages();
const currentPageIndex = pages.length - 1; // 当前页面索引
const prevPageIndex = currentPageIndex - 1; // 来源页面索引
onLoad(() => {
  if (!(prevPageIndex >= 0)) {
    iconType.value = "home";
  }
});
const goback = () => {
  if (prevPageIndex >= 0) {
    const prevPage = pages[prevPageIndex];
    const prevPagePath = prevPage.route; // 来源页面路径
    if (
      prevPagePath == "pages/my/index" ||
      prevPagePath == "pages/index/index" ||
      prevPagePath == "pages/detection/detection"
    ) {
      uni.switchTab({ url: "/" + prevPagePath });
    } else {
      uni.redirectTo({ url: "/" + prevPagePath });
    }
  } else {
    uni.switchTab({ url: "/pages/index/index" });
  }
};

// 状态栏高度
const height = 24 || uni.getStorageSync("topbarheight");
</script>

<style lang="scss" scoped>
.status_bar {
  width: 100%;
  position: relative;
}

.back {
  position: absolute;
  left: 10rpx;
  bottom: 10px;
  z-index: 999999;
}

text {
  position: absolute;
  margin: auto;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
}
</style>
